<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0">
    <title th:text="${title}"></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
</head>
<body>


<!--导航-->
<nav class="ui inverted attached segment" th:fragment="nav(n)">
    <div class="ui container">
        <div class="ui inverted menu secondary stackable">
            <!--            item表示是menu中的单位之一-->
            <h2 class="ui teal header item">
                WANT
            </h2>
            <a  th:href="@{/user/index}" class="m-item item m-mobile-hide" th:classappend="${n==1} ? 'active'"><i class="home icon"></i>首页</a>
            <a  th:href="@{/user/type}" class="m-item item m-mobile-hide" th:classappend="${n==2} ? 'active'"><i class="idea icon"></i>分类</a>
            <a  th:href="@{/user/tag}" class="m-item item m-mobile-hide" th:classappend="${n==3} ? 'active'"><i class="tags icon"></i>标签</a>
            <a  th:href="@{/user/archives}" class="m-item item m-mobile-hide" th:classappend="${n==4} ? 'active'"><i class="clone icon"></i>归档</a>
            <a  th:href="@{/user/aboutme}" class="m-item item m-mobile-hide" th:classappend="${n==5} ? 'active'"><i class="info icon"></i>关于我</a>

            <div class="item right">
                <div class="ui input transparent inverted">
                    <input type="text" placeholder="搜索...">
                    <i class="search icon link"></i>
                </div>
            </div>
        </div>
    </div>

<!--    //导航按钮-->

    <a href="javascript:void(0)" class="ui black icon button m-right-top m-mobile-show toggle">
        <i class="sidebar icon"></i>
    </a>
</nav>


<!--底部的内容-->

<footer class="ui inverted vertical segment" th:fragment="footer">
    <div class="ui center aligned container m-padded-tb-massive">
        <!--        grid将footer分为16-->
        <div class="ui grid divided inverted stackable">
            <!--            wide填满-->
            <div class="three wide column">
                <img src="../static/images/weichat.png" th:src="@{/images/weichat.png}" alt="_blank" class="image ui rounded centered" style="width:110px;height:110px">
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <div class="ui inverted link list " >
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <p>这里是一些其他信息</p>
            </div>


        </div>

        <div class="ui inverted section divider"></div>
        <p>关于法律信息</p>
    </div>
</footer>


<th:block th:fragment="script">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
    <script th:src="@{/js/action.js}"></script>
    <script th:src="@{/js/snow.js}"></script>
    <script th:src="@{/js/text.js}"></script>
    <script th:src="@{/js/cartoon.js}"></script>

    <script th:inline="javascript">
        $('.toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-hide');
        });
    </script>
</th:block>
</body>
</html>